---
title: Prose
description: Used to style remote HTML content
composition: true
---

<ExampleTabs name="prose-basic" />

## Setup

If you don't already have the snippet, run the following command to add the
`prose` snippet

```sh
npx @chakra-ui/cli snippet add prose
```

## Usage

```jsx
import { Prose } from "@/components/ui/prose"
```

```jsx
<Prose>
  <div dangerouslySetInnerHTML={{ __html: "..." }} />
</Prose>
```

## Examples

### Sizes

Use the `size` prop to change the size of the `Prose` component

<ExampleTabs name="prose-with-sizes" />

### Blockquote

Blockquote elements are styled to match the design language of the `Blockquote`
component.

<ExampleTabs name="prose-with-blockquote" />

### List

List elements are styled to match the design language of the `List` component.

<ExampleTabs name="prose-with-list" />

### React Markdown

Here's an example of using the `react-markdown` library to render markdown
content.

<ExampleTabs name="prose-with-react-markdown" />

### Table

The table elements are styled to match the design language of the `Table`
component.

<ExampleTabs name="prose-with-table" />
